<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
  <script>
    // onload = function(){
    //   console.log( document.querySelector(".box") );
    // }
  </script>
</head>
<body style="height:3000px;width:2000px">
  <div class="box"></div>
  <!-- <img src="./avatar1.jpg" alt="" class="img"> -->
</body>
<script>

  // console.log( document.querySelector(".box") );

  // var img = document.querySelector(".img")
  // console.log(img);
  
  // onload = function(){
  //   console.log(img.offsetWidth);
  // }


  // ========


  // onresize = function(){
  //   // 获取页面可视区域大小
  //   console.log( document.documentElement.clientWidth, document.documentElement.clientHeight, 1 );
  //   // 获取窗口的内容大小
  //   console.log( window.innerWidth, window.innerHeight, 2 );
  // }


  // =======


  onscroll = function(){
    // 获取页面滚走了的距离
    console.log( document.documentElement.scrollTop, document.documentElement.scrollLeft );
  }


</script>
</html>